window.addEventListener('load',function(){
    // 侧边栏鼠标经过换图片
    var hongs = document.querySelectorAll('.hong');
    var sid = document.querySelectorAll('.sid');

    for(var i = 0 ;i< sid.length; i++){
        // 绑定一个自定义属性 用于选择
        sid[i].setAttribute('data-index', i);
        // 鼠标经过
        sid[i].onmouseover = function (){
            // heis.style.display = 'none';
            var index = this.getAttribute('data-index');
            hongs[index].style.display = 'block';            
        }
        // 鼠标离开
        sid[i].onmouseout = function (){
            var index = this.getAttribute('data-index');
            hongs[index].style.display = 'none';
        }             
    }

    // 轮播图

    // 最大的div
    var types = document.querySelector('.type');
    // 左右按钮
    var prev = document.querySelector('.button-prev');
    var next = document.querySelector('.button-next');
    var typesWidth = types.offsetWidth;
    // 鼠标经过 显示与隐藏 左右按钮
    types.addEventListener('mouseenter',function(){    
        prev.style.display = 'block';
        next.style.display = 'block';
        // 关闭定时器
        clearInterval(timer);
        //  清除定时器变量
        timer = null ;        
    })
    types.addEventListener('mouseleave',function(){    
        prev.style.display = 'none';
        next.style.display = 'none';
        timer = setInterval(function(){
            // 调用 点击右边按钮
            next.click();
        },2000)    
    })
    // 鼠标经过离开 按钮  移动背景图片位置
    prev.onmouseover = function (){
        prev.style.backgroundPosition = '0 0';
    }
    prev.onmouseout = function (){
        prev.style.backgroundPosition = '-90px 0';
    }
    next.onmouseover = function (){
        next.style.backgroundPosition = '-43px 0';
    }
    next.onmouseout = function (){
        next.style.backgroundPosition = '-120px 0';
    }
    // 动态生成小圆圈
    var ul = types.querySelector('.lunbotu');
    var dian = types.querySelector('.promo-nav');
    for(var i =0 ;i< ul.children.length;i++){
        // 创建一个小li
        var li = document.createElement('li');
        // 通过自定义属性 加一个索引号
        li.setAttribute('data-inde',i);
        // 把小li 插入到 ul 里面
        dian.appendChild(li);
        // 绑定点击事件
        li.addEventListener('click',function(){
            // 清除所有小li的类
            for(var i = 0;i<dian.children.length;i++){
                dian.children[i].className='';
            }
            // 当前小li设置class 样式
            this.className= 'selected';

            // 点击小圆圈 移动图片
            // 拿到当前圆圈的索引号
            var inde = this.getAttribute('data-inde');
            // 点击某个小li 把这个li的索引给num 和 circle
            num = circle = inde ;
            console.log(inde);            
            animate(ul, -inde * typesWidth)
        })
    }
    // 把 第一个小圆点设置一个 class 样式
    dian.children[0].className = 'selected';
    
    // 克隆第一张图片到最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    // 定义   滚动 动画
    function animate(obj, target, callback) {
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里面
                callback && callback();
            }
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
            obj.style.left = obj.offsetLeft + step + 'px';    
        }, 15);
    }

    // 点击右侧按钮 图片滚动一张
    var num = 0;
    var circle = 0; //控制小圆圈播放
    // flag 节流阀
    var flag = true;
    next.addEventListener('click',function(){
        if(flag){
            flag = false ;//关闭节流阀
            if(num == ul.children.length -1 ){
                ul.style.left = 0;
                num = 0;
            }
            num ++;
            animate(ul, -num * typesWidth ,function(){
                flag = true; //动画做完 打开节流阀
            });
            // 点击右侧按钮 小圆圈跟着一起变
            circle++;
            // 如果circle == 4说明走到最后克隆的这张图片了  就复原
            if( circle == dian.children.length) {
                circle=0;
            }
            // 调用函数
            circleChange();
        }
    });
    // 点击左侧按钮 图片滚动
    prev.addEventListener('click',function(){
       if(flag){
           flag = false ;
            if(num ==  0 ){
                num = ul.children.length -1;
                ul.style.left = - num * typesWidth + 'px';                
            }
            num --;
            animate(ul, -num * typesWidth ,function(){
                flag = true; //动画做完 打开节流阀
            });
            // 点击右侧按钮 小圆圈跟着一起变
            circle --;
            // 如果circle == 4说明走到最后克隆的这张图片了  就复原
            if( circle < 0) {
                circle= dian.children.length - 1;
            }
            // circle = circle < 0 ? dian.children.length - 1 : circle;
            // 调用函数
            circleChange();
       }
    });
    function circleChange(){
        // 清除小圆圈的类名
        for(var i = 0;i<dian.children.length;i++){
            dian.children[i].className = '';
        }
        // 留下当前小圆圈的类
        dian.children[circle].className = 'selected';
    }

    // 自动播放轮播图
    var timer = setInterval(function(){
        // 调用 点击右边按钮
        next.click();
    },2000)

    // 分类详情 弹出
    var type_info = document.querySelector('.type-info');
    var details = document.querySelector('.details');
    // types.addEventListener('mouseenter',function(){  
    type_info.addEventListener('mouseenter',function(){
        details.style.display = 'block';
    })
    type_info.addEventListener('mouseleave',function(){
        details.style.display = 'none';
    })
    console.log(type_info);
    
})